Most designers' portfolios are online.
This requires some heavy lifting to organize your assets and present them maintaining clarity
and the correct color.
Here I'll share how to create,
organize, and present the work on a website.
I created my first portfolio in my senior year at college.
I knew this was pretty important to find a job.
Now, this was long before the internet,
so everything was physical.
That meant dragging the original comp,
poster, booklet, or whatever around town
in a big, black, and unwieldy portfolio case.
Fortunately, I spent the previous summer working with a photographer on a project that was shot on 4x5 transparencies.
So,
I decided to do the same.
Shoot all the work and mount the transparencies onto boards.
The
upside was my introduction into documenting one's work.
The downside was people trying to see a tiny poster on a tiny image.
There's a saying, history is written by the victor.
Something similar happens in the arts.
If the work isn't documented,
it goes away and is lost in history.
Documenting and archiving work is usually ignored,
and we start the next project.
The
process to document the work gets bigger and bigger,
and finally seems impossible.
So,
designers just don't do it.
When they need the image for their online portfolio or to send to a publisher,
it's a last-minute scramble.
Here's my process.
It's worked for me for my entire career.
First, the image asset archive.
Let's start with the structure of an archive.
Kind
of always like knowing where you'll put something fragile down before picking it up.
I've
had one for a couple of decades dedicated to the documentation of my work.
So,
I don't have a lot of time to go through this stuff. I'm going to start with the main project. I have a folder with folders for each client.
This could be your class name if you're a student or project name if you work in-house.
I
don't name the files with dates or names like Final, Final.
After
a few months, I can't remember what is in July 2023.
Each
folder has folders for each project.
If needed, The specific items each also have their own folder.
In this, we hold one folder for 300 DPI images,
another for 72 DPI images,
and one more for the PDF of the project.
I keep my names simple and easy to understand.
Stuff will be confusing a year later.
The
archive is stored on an external hard drive,
a backup drive, and Google Drive or any cloud-based service that will store it safely.
Here
is my actual archive.
Hopefully this will make it a bit clearer.
Folders by client,
projects in each client folder,
72 DPI, 300 DPI, and a PDF folder for each project, the
high-resolution PDF that I can reopen later, and
for a publication, I might have a cover and several spreads in 300 DPI and the
same images in 72 DPI.
It's
backed up on the external hard drive and on Google Drive as a safety measure.
Now
let's talk about documenting the work.
Now that PDF you mentioned,
what is that?
Now when I finish any project,
no matter how large or small,
I save the file as a high-resolution PDF.
This
solves the problem of opening a file a couple of years later to find missing
images or fonts.
The PDF is a stable format that I can then open in Photoshop or print.
Do
this at the end of every project.
It's a five-minute process that is invaluable.
Now
that I've saved the file as a PDF,
I can open it in any resolution I need to.
So first, I'll open Photoshop.
I
will find that file, open
it, and
there it is.
I
can choose whatever size I want here.
So I want a 300 DPI version.
I'm going to make this 8 inches wide and about 10 inches tall.
That's about the size any publication would be.
I
can flatten the image because I don't need anything more than that.
Now I'm ready to go.
I can save as, and
I'm going to call this 300.
Now
that I've made the 300 DPI version,
I'll make a 72 DPI version because I know I want to put it in a web
or a screen-based environment.
So I open Photoshop,
and again, it's the same process.
I'm going to open the PDF
file.
This
time I'm going to save it as 8 inches by 10 inches at 72 DPI.
And I go through the same process.
I'm going to go through the same process of flattening the image.
Save
as.
I'm
going to call this one 72.
And
now I have a 300 DPI version and a 72 DPI version and the original PDF.
And they're ready to be archived.
If
I'm working on a book or a publication,
once I wrap up the project and it's final,
I of course have saved it as a high-res PDF.
Now I can open it in Photoshop.
Here's
an example of a PDF for a recent book that I wrote.
I'm going to open it,
and you can see that we get multiple pages here that open up as a possibility.
So
I'm going to select this spread.
Now
it's not 8 inches wide.
It's 16 because there's two pages.
It's a spread.
16.
Open.
Now
I have that spread.
I'm going to flatten again
the image.
And
I'm going to save it.
And
here I'll mark what page it is.
Page
9.
And this is 300
DPI.
So I'm going to save this to my computer.
And
it's done.
Now of course I can repeat the same process exactly if I want to open up other pages and save them as well.
And it's always a good idea to have about 7 or 8 that you can document of different kinds of pages on a book.
So
once again, we're going to open it.
And I've got a chapter opening spread that I've documented.
So
I might want to show something that is a little bit more diverse.
For
example, this page has multiples
of objects.
I'm
going to open this.
And
follow the exact same process.
Flatten
image.
Save
as.
This
is page 29.
And it's 300
DPI.
Save
it to my computer.
Now
that I have the 300 DPI version,
I can use that to save a file that is 72 DPI,
better suited for the web.
So again, I will save
this time as
a
JPEG.
And
the width on a website,
probably I don't need it to be any wider than 2500 pixels.
And
export it.
And
this one I'm going to name
72 DPI.
And
I'll repeat the process as needed.
And
now I have 300
DPI versions and 72 DPI versions of multiple spreads of the book.
And I'll talk about how to combine these to make them a little better looking as actual books later.
I save motion projects at the highest resolution possible because I'm sure that whatever the standard is today will be higher in five years.
Okay,
you may ask, what about three-dimensional objects?
For some, I set up a very simple cove with a sheet of
white or colored paper.
Indirect
sunlight casts a nice even tone that has the best even color.
Again,
shoot at the highest resolution possible.
And use the process to save the images as 300 DPI and 72 DPI.
One
of my pet peeves documenting printed work is that I could never achieve sharp typography.
Mockup
software and imagery are fantastic at creating clear dimensional images of work.
But stay away from anything too tricky or complicated that seems to be the most popular.
At one point, I found that every student presentation had the same bus shelter mockup.
It was okay the first time, but after 30,
I told everyone, no more bus shelters.
I
like Context Live Surface because it's simple and has clear images.
It's a book,
bottle, box,
or mobile device on a white or colored background.
Nothing too specific.
One
more step here.
With a book or printed item,
the mockup has no side pages and other details.
So I mash it up.
I
photograph the actual item for the edges and all of the details.
In
Photoshop, I combine the files.
In the end,
I have the page edges or spine or special shape of an object with perfect lighting,
color, and type that I can read for the content.
Now,
let's talk about the website.
This could be an entire course,
but I'll cover the basics here.
First,
identify what you value in design.
These are your attributes that define you as a brand.
I know
everyone on social media claims to be their own brand,
but in this case,
you need to differentiate yourself clearly.
For example,
I value clarity,
honesty, and a straightforward approach.
Of
course, we're all individuals with contradictions and complexity,
but you can't be here.
The website portfolio needs to relay your point of view quickly.
You want the viewer to remember you and your work and say,
yeah, that Gerardo was about
experimentation.
Or, you
know, I prefer that designer Isabel.
She's a minimalist and that works better for our brand.
The psychologist,
Carl Jung, stated that we use symbols and archetypes to understand complex issues.
In the simplest way,
like the Sundance project,
we understand archetypes.
This might help determine your identity as a designer.
Which one are you?
As
for the platform,
there are multiple options.
You can design and code your own site,
use a templated system like Squarespace,
a platform like Behance,
or hire a developer to create the site.
The choice should be made with this question.
What will be the easiest to add to and maintain?
The worst website is one that isn't up and running.
Whatever
platform or message you choose,
the design should be easy to navigate
well-crafted with room to grow.
That's
my design approach.
Rather than making the viewer wonder about my philosophy,
the website design matches the idea.
Humans
will always view a page in any format by looking at the image first and try to understand it.
Then they'll look for a headline or some additional information.
And finally, to any other text that might answer more questions.
Give
the viewer something big and colorful right away.
Think of this as the glamour shot of a new Mercedes-Benz on a car brochure.
You've gotten the viewer's attention.
Most people decide to stay or leave a site within seconds.
Good job.
Now
lead the viewer to your other projects using the amazing images and projects you've created.
I won't
go into depth on the website structure and search engine optimization issues,
as they'll take more time than we have.
But starting out, you might have four to five projects with a description of what the problem was and how you solved it.
Mid-career and later,
you'll have more work to add.
Each should have several images,
including some of the process.
And
for all the work,
that maybe doesn't need an entire case study, add an archive
that's an overview of all of your work.
Now
your site is up and running.
You have work documented and archived,
and you follow the same process at the end of every project.
When I or another author sends an email asking for one of your projects to use on a book or in an online article,
you're ready to go.
Documentation
and an online portfolio are like
wheels on a car.
We expect them.
Make your presentation amazing.